<template>
  <div class="skill-page">
    <BaseHeader :navs="navs" :activeNav="activeNav" @nav-change="activeNav = $event" />
    <section class="banner-section">
      <div class="banner-content">
        <div>
          <h1>开设课程</h1>
          <p>多类型课程，实操理论结合，支持就业对接</p>
          <el-button type="primary" @click="onCourseClick">立即查看</el-button>
        </div>
        <img class="banner-drone" src="@/assets/index/drone.png" alt="无人机" />
      </div>
    </section>
    <div class="skill-infoa">
      <div class="skill-info-item">
        <img src="@/assets/index/skill-i.png" alt="职业技能介绍" />
        职业技能介绍
      </div>
      <div>
        多旋翼无人机拥有体积小、重量轻、噪音小、隐蔽性好，适合多平台，多空间使用；可以垂直起降，不需要弹射器、发射架进行发射，可悬停、侧飞、倒飞；飞行高度低，具有很强的机动性，执行特种任务能力强；结构简单控制灵活，成本低，螺旋桨小，安全性好，拆卸方便，且易于维护等诸多优点，广泛应用于教育科研领域、航拍领域、军用领域、警用安全领域、农业领域等领域
      </div>
    </div>
    <section class="advantage-section">
      <h2>为什么选择我们？</h2>
      <p>以深厚行业积淀、顶尖师资团队和完备服务体系，我们值得您托付信赖</p>
      <div class="advantage-list">
        <div v-for="item in advantages" :key="item.title" class="advantage-card" @mouseenter="hover = item.title"
          @mouseleave="hover = ''" :class="{ active: hover === item.title }">
          <img :src="item.icon" :alt="item.title" />
          <h3>{{ item.title }}</h3>
          <p>{{ item.desc }}</p>
        </div>
      </div>
    </section>
    <div class="safe-module">
      <div class="safe-title">
        <div class="safe-title-main">更专业 更可靠 为您保驾护航</div>
        <a class="safe-more" @click="goToWurenji">查看全部 <i class="el-icon-arrow-right"></i></a>
      </div>
      <div class="safe-orgs">
        <div v-for="(org, idx) in orgList" :key="org.name" :class="['org-item', { active: activeOrg === idx }]"
          @click="activeOrg = idx">
          <img :src="org.logo" class="org-logo" />
          <div>
            <div class="org-name">{{ org.name }}</div>
            <div class="org-desc">{{ org.desc }}</div>
          </div>
          <!-- <div v-if="activeOrg === idx" class="org-underline"></div> -->
        </div>
      </div>
      <div class="safe-content">
        <div class="bigbg">
          <div class="safe-left">
            <div class="safe-org-title">{{ orgList[activeOrg].name }}</div>
            <img :src="orgList[activeOrg].img" class="safe-org-img" />
          </div>
          <div class="safe-center">
            <div class="safe-card">
              <div class="safe-card-title">
                <img src="@/assets/index/b1.png" alt="" />备考课程
              </div>
              <div class="safe-course-list">
                <div class="safe-course" v-for="course in orgList[activeOrg].courses" :key="course.title">
                  <img :src="course.img" class="safe-course-img" />
                  <div class="safe-course-info">
                    <div class="safe-course-title">{{ course.title }}</div>
                    <div class="safe-course-type">{{ course.type }}</div>
                  </div>
                </div>
              </div>
              <div class="safe-card-title">
                <img src="@/assets/index/b2.png" alt="" />题库
              </div>
              <div class="safe-quiz-list">
                <div class="safe-quiz" v-for="quiz in quizList" :key="quiz.title">
                  <img :src="quiz.icon" class="safe-quiz-icon" />
                  <span>{{ quiz.title }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="safe-right">
          <div class="safe-exam-box">
            <div class="bg">
              <div class="safe-exam-title">
                2025年6月 {{ orgList[activeOrg].name }} 考试时间
              </div>
              <div class="safe-exam-countdown">
                还有
                <span v-for="n in countdownArr" :key="n" class="countdown-num">{{ n }}</span>
                <span class="countdown-unit">天</span>
              </div>
            </div>
            <div class="safe-exam-info">
              <div style="margin-top: 20px">
                <img src="@/assets/index/m1.png" alt=""
                  style="width: 20px; margin-left: 40px; margin-right: 10px;vertical-align:middle" />
                报名平台：
                <div class="safe-link" style="margin-left: 70px">
                  {{ orgList[activeOrg].platform }}
                </div>
              </div>
              <div style="margin-top: 20px">
                <img src="@/assets/index/m2.png" alt=""
                  style="width: 20px; margin-left: 40px; margin-right: 10px;vertical-align:middle" />报名条件：
              </div>
              <div style="margin-left: 70px" class="safe-link" v-for="(cond, i) in orgList[activeOrg].conditions"
                :key="i">
                {{ i + 1 }}、{{ cond }}
              </div>
              <div style="margin-top: 20px">
                <img src="@/assets/index/m3.png" alt=""
                  style="width: 20px; margin-left: 40px; margin-right: 10px;vertical-align:middle" />交流群：{{
                    orgList[activeOrg].qq }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="safacontent">
      <div class="low-altitude-section">
        <div class="section-title">
          <h2>高薪就业方向</h2>
          <p>具备高收入潜力，良好职业晋升空间及行业高需求</p>
        </div>
        <div class="card-list">
          <div class="app-card" v-for="item in appList" :key="item.id" @mouseenter="hoverIndex = item.id"
            @mouseleave="hoverIndex = null" :class="{ active: hoverIndex === item.id }">
            <div class="card-img">
              <img :src="item.img" :alt="item.title" />
            </div>
            <div class="cont">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="last-section">
      <div class="skill-section">
        <div class="section-title">
          <h2>无人机考试指南</h2>
          <p>热门课程，让迷茫的你找到方向</p>
        </div>
        <div class="skill-box">
          <div class="skill-info">
            <h3>零基础全日制班</h3>
            <div class="skill-list">
              <div class="skill-item" v-for="item in skillList" :key="item.id">
                <img src="@/assets/index/check.png" alt="" class="skill-icon" />
                <span>{{ item.content }}</span>
              </div>
            </div>

            <div class="skill-btn" @click="goToSkillPage">了解更多</div>
          </div>
          <div class="skill-img">
            <img src="@/assets/index/drone-skill.png" />
          </div>
        </div>
      </div>
    </div>

    <BaseFooter />
  </div>
</template>
<script>
import BaseHeader from "@/components/baseHeader.vue";
import BaseFooter from "@/components/baseFooter.vue";
export default {
  name: "skill",
  components: { BaseHeader, BaseFooter },
  data() {
    return {
      navs: ["首页", "新闻", "题库", "资料", "产教课程"],
      activeNav: "职业技能",
      hover: "",
      advantages: [
        {
          title: "专业",
          desc: "专业的培训队伍,专业的培训设备，专业的训练场地",
          icon: require("@/assets/index/professional.png"),
        },
        {
          title: "创新",
          desc: "创新、科芋的教学模式高效率，传授无人机知识",
          icon: require("@/assets/index/innovation.png"),
        },
        {
          title: "人才",
          desc: "资深的无人机教员团队，拔尖的敢学水平和教学质量",
          icon: require("@/assets/index/talent.png"),
        },
        {
          title: "实力",
          desc: "能飞无人机学院，首批驾培+广东考试点，辐射周边考务",
          icon: require("@/assets/index/strength.png"),
        },
      ],
      hoverIndex: null,
      appList: [
        {
          id: 1,
          title: "森林防火",
          img: require("@/assets/index/forest-fire.png"),
        },
        {
          id: 2,
          title: "农林植保",
          img: require("@/assets/index/forest-fire2.png"),
        },
        {
          id: 3,
          title: "影视拍摄",
          img: require("@/assets/index/forest-fire3.png"),
        },
        {
          id: 4,
          title: "电力巡视",
          img: require("@/assets/index/forest-fire4.png"),
        },
      ],
      skillList: [
        {
          id: 1,
          content:
            "特点一：多旋翼无人机拥有体积小、重量轻、噪音小、隐蔽性好，适合多平台，多空间使用；",
        },
        {
          id: 2,
          content:
            "特点二：可以垂直起降，不需要弹射器、发射架进行发射，可悬停、侧飞、倒飞；飞行高度低，具有很强的机动性，执行特种任务能力强；",
        },
        {
          id: 3,
          content:
            "特点三：结构简单控制灵活，成本低，螺旋桨小，安全性好，拆卸方便，且易于维护等诸多优点，广泛应用于教育科研领域、航拍领域、军用领域、警用安全领域、农业领域等领域；",
        },
      ],
      orgList: [
        {
          name: "CAAC",
          logo: require("@/assets/index/min1.png"),
          desc: "掌管中国民航规划、安全等多项事务",
          img: require("@/assets/index/drone-photo2.png"),
          platform: "www.caac.com",
          conditions: ["需证明中国国籍", "手机号能够绑定操作"],
          qq: "12345678",
          courses: [
            {
              title: "CAAC培训课程系列",
              type: "初级课程",
              img: require("@/assets/index/drone-photo2.png"),
            },
            {
              title: "CAAC培训课程系列",
              type: "中级课程",
              img: require("@/assets/index/drone-photo3.png"),
            },
          ],
        },
        {
          name: "AOPA",
          logo: require("@/assets/index/min2.png"),
          desc: "聚焦航空器拥有者与驾驶员权益及业务的协会",
          img: require("@/assets/index/drone-photo3.png"),
          platform: "www.aopa.com",
          conditions: ["年满18周岁", "身体健康"],
          qq: "23456789",
          courses: [
            {
              title: "AOPA培训课程",
              type: "初级课程",
              img: require("@/assets/index/drone-photo3.png"),
            },
            {
              title: "AOPA培训课程",
              type: "中级课程",
              img: require("@/assets/index/drone-photo2.png"),
            },
          ],
        },
        {
          name: "UTC",
          logo: require("@/assets/index/min3.png"),
          desc: "提供专业技术培训，助力能力提升的认证体系",
          img: require("@/assets/index/drone-skill.png"),
          platform: "www.utc.com",
          conditions: ["具备基础知识", "通过初步测试"],
          qq: "34567890",
          courses: [
            {
              title: "UTC培训课程",
              type: "初级课程",
              img: require("@/assets/index/drone-skill.png"),
            },
            {
              title: "UTC培训课程",
              type: "中级课程",
              img: require("@/assets/index/drone-photo2.png"),
            },
          ],
        },
      ],
      activeOrg: 0,
      quizList: [
        { title: "章节练习", icon: require("@/assets/index/j1.png") },
        { title: "模拟试卷", icon: require("@/assets/index/j2.png") },
        { title: "题组练习", icon: require("@/assets/index/j3.png") },
      ],
      countdownArr: ["0", "4", "6"],
    };
  },
  methods: {
    onCourseClick() {
      // this.$router.push("/course");
      this.$message.success("点击了立即报名！");
    },
    goToSkillPage() {
      // 跳转到技能页面
      this.$router.push("/examination");
    },
    goToWurenji() {
      this.$router.push("/wurenji");
    },
  },
};
</script>
<style scoped lang="scss">
.safacontent {
  width: 1200px;
  margin: 0 auto;
}

.banner-section {
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: url("@/assets/index/skillbg.png") no-repeat;
  background-size: 100% 100%;
  padding: 40px 80px;

  .banner-content {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    text-align: left;

    h1 {
      font-size: 32px;
      font-weight: bold;
    }

    p {
      margin: 16px 0;
      color: #666;
    }
  }

  .banner-drone {
    width: 505px;
    height: 229px;
  }
}

.skill-infoa {
  width: 1200px;
  margin: -60px auto 0;
  height: 148px;
  background: #fafbff;
  box-shadow: 4px 4px 12px 0px rgba(55, 115, 242, 0.08);
  border-radius: 8px;
  text-align: left;
  padding: 24px;
  text-align: justify;

  .skill-info-item {
    font-weight: 600;
    font-size: 22px;
    color: #0a2e96;

    img {
      width: 20px;
      vertical-align: middle;
    }
  }
}

.advantage-section {
  width: 1200px;
  margin: 80px auto 100px;
  text-align: center;

  .advantage-list {
    display: flex;
    justify-content: space-around;
    margin-top: 32px;

    .advantage-card {
      width: 285px;
      margin: 0 16px;
      padding: 24px;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      cursor: pointer;
      transition: box-shadow 0.2s;
      background: linear-gradient(180deg, #e9f5fd 0%, #f3f9fd 100%);
      border-radius: 12px;
      border: 2px solid;
      border-image: linear-gradient(223deg,
          rgba(255, 255, 255, 1),
          rgba(152, 219, 250, 1)) 2 2;

      &:hover,
      &.active {
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        border-color: #409eff;
      }

      img {
        width: 120px;
      }

      h3 {
        font-size: 30px;
        margin-bottom: 8px;
      }

      p {
        color: #2a3452;
        font-size: 18px;
      }
    }
  }
}

.low-altitude-section {
  margin: 60px 0;
}

.card-list {
  display: flex;
  justify-content: space-between;
  gap: 0;
}

.app-card {
  width: 285px;
  height: 285px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0 2px 12px #e6eefa;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 32px #409eff22;
}

.card-img img {
  width: 100%;
  height: 285px;
  object-fit: cover;
}

.app-card .cont {
  font-weight: 600;
  font-size: 22px;
  color: #12192d;
  position: absolute;
  bottom: 0;
  width: 285px;
  height: 62px;
  line-height: 62px;
  background: linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
  box-shadow: 0px 2px 12px 0px #e1e3eb;
  border-radius: 12px;
  border: 1px solid #ffffff;
}

.skill-section {
  padding: 60px 0;
}

.skill-box {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  background: linear-gradient(90deg, #f6f9fe 60%, #e6f0ff 100%);
  border-radius: 12px;
  box-shadow: 0 4px 24px #e6eefa;
  margin-top: 30px;
}

.skill-info {
  width: 474px;
  height: 511px;
  background: #ffffff;
  border-radius: 12px 0px 0px 12px;
  border: 1px solid #ffffff;
  padding: 20px 40px;
}

.skill-icon {
  width: 20px;
  vertical-align: middle;
  margin-right: 10px;
}

.skill-info h3 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  text-align: left;
}

.skill-list .skill-item {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 15px;
  color: #12192d;
  line-height: 21px;
  text-align: left;
  margin-top: 30px;
}

.skill-btn {
  width: 172px;
  height: 40px;
  background: #1664ff;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  line-height: 40px;
  margin-top: 70px;
  cursor: pointer;
}

.skill-img {
  width: 764px;
  height: 511px;
  background: linear-gradient(293deg, #edebff 0%, #f8fcff 100%);
  // box-shadow: 0px 2px 12px 0px #e1e3eb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-img img {
  width: 546px;
  border-radius: 8px;
}

.last-section {
  width: 100%;
  background: #f5f7fd;
}

.safe-module {
  width: 1200px;
  margin: 0px auto 0 auto;

  padding: 40px;
  padding-top: 0;
  position: relative;
  overflow: hidden;
}

.safe-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;

  .safe-title-main {
    font-size: 32px;
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
  }

  .safe-more {
    color: #3482f4;
    font-size: 16px;
    text-decoration: none;
    display: flex;
    align-items: center;

    i {
      margin-left: 4px;
    }

    &:hover {
      color: #1664ff;
    }
  }
}

.safe-orgs {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 24px;

  .org-item {
    display: flex;
    // flex-direction: column;
    align-items: center;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid rgba(40, 49, 51, 0.12);

    .org-logo {
      width: 56px;
      height: 56px;
      margin-bottom: 8px;
    }

    .org-name {
      font-size: 18px;
      font-weight: 600;
      color: #3482f4;
    }

    .org-desc {
      font-size: 14px;
      color: #888;
      margin-bottom: 4px;
    }

    .org-underline {
      width: 40px;
      height: 3px;
      background: #3482f4;
      border-radius: 2px;
      margin-top: 6px;
    }

    &.active {
      border-bottom: 2px solid #3482f4;
    }

    &.active .org-underline {
      display: block;
    }
  }
}

.safe-content {
  display: flex;
  // gap: 32px;
  margin-top: 24px;
}

.safe-left {
  width: 240px;
  height: 359px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 40px;
  margin-top: 35px;
}

.safe-org-title {
  font-size: 24px;
  font-weight: 600;
  color: #12192d;
  margin-bottom: 16px;
  text-align: left;
}

.safe-org-img {
  width: 240px;
  height: 359px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(52, 130, 244, 0.12);
  transition: transform 0.3s;

  &:hover {
    transform: scale(1.02);
  }
}

.safe-center {
  width: 506px;
  // flex: 1;
}

.safe-card {
  // background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  // border-radius: 20px;
  padding: 24px;
  // box-shadow: 0 8px 24px rgba(52, 130, 244, 0.08);
}

.safe-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #12192d;
  margin-bottom: 16px;
  margin-top: 12px;
  position: relative;
  padding-left: 12px;
  text-align: left;
  display: flex;

  img {
    width: 20px;
    height: 25px;
    margin-right: 5px;
  }

  // &::before {
  //   content: "";
  //   position: absolute;
  //   left: 0;
  //   top: 50%;
  //   transform: translateY(-50%);
  //   width: 4px;
  //   height: 18px;
  //   background: #3482f4;
  //   border-radius: 2px;
  // }
}

.safe-course-list {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.safe-course {
  width: 210px;
  height: 132px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(52, 130, 244, 0.06);
  display: flex;
  align-items: center;
  padding: 12px 16px;
  // gap: 12px;
  min-width: 160px;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(52, 130, 244, 0.12);
  }
}

.safe-course:nth-child(2) {
  margin-right: 0;
}

.safe-course-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 10px;
}

.safe-course-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.safe-course-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2538;
}

.safe-course-type {
  font-size: 13px;
  color: #666;
}

.safe-quiz-list {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.safe-quiz {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(52, 130, 244, 0.06);
  display: flex;
  align-items: center;
  padding: 12px 20px;
  gap: 10px;
  font-size: 15px;
  color: #3482f4;
  font-weight: 500;
  transition: all 0.3s;

  // &:hover {
  //   transform: translateY(-4px);
  //   box-shadow: 0 8px 24px rgba(52, 130, 244, 0.12);
  //   background: #3482f4;
  //   color: #ffffff;
  // }
}

.safe-quiz-icon {
  width: 24px;
  height: 24px;
}

.safe-right {
  width: 320px;
  height: 495px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.safe-exam-box {
  height: 495px;
  // background: linear-gradient(180deg, #e9f5ff 0%, #f8fbff 100%);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(52, 130, 244, 0.08);
  // padding: 24px;
  width: 100%;
}

.safe-exam-title {
  font-size: 18px;
  font-weight: 600;
  color: #5c43a4;
  margin-bottom: 16px;
  text-align: center;
}

.safe-exam-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
  color: #5c43a4;
}

.countdown-num {
  display: inline-block;
  width: 32px;
  height: 40px;
  background: #ffffff;
  color: #5c43a4;
  font-size: 24px;
  font-weight: 700;
  border-radius: 8px;
  text-align: center;
  line-height: 40px;
  box-shadow: 0 4px 16px rgba(52, 130, 244, 0.08);
}

.countdown-unit {
  font-size: 16px;
  color: #666;
  margin-left: 4px;
}

.safe-exam-info {
  font-size: 14px;
  color: #1d2538;
  margin-top: 12px;
  text-align: left;
}

.safe-link {
  // color: #3482f4;
  font-weight: 500;
  transition: color 0.3s;
  color: #666;
  // &:hover {
  //   color: #1664ff;
  // }
}

.bg {
  background: url("@/assets/index/exam-bg.png") no-repeat;
  background-size: 100% 100%;
  width: 320px;
  height: 150px;
  padding-top: 24px;
}

.bigbg {
  background: url("@/assets/index/exam1.png") no-repeat;
  background-size: 100% 100%;
  width: 840px;
  height: 495px;
  padding-top: 24px;
  display: flex;
  margin-right: 20px;
}
</style>
